<template>
  <div>
    <el-dialog
      title="从已有资源导入配置添加"
      :visible.sync="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
      @close="close"
    >
      <div class="tab">
        <el-tabs v-model="tabName">
          <el-tab-pane
            v-if="!$store.getters.banBtnList.includes('MCH_BTN_BK_FD_TYPE_CREATE')"
            label="全日房"
            name="0"
          />
          <el-tab-pane
            v-if="!$store.getters.banBtnList.includes('MCH_BTN_BK_HR_TYPE_CREATE')"
            label="钟点房"
            name="1"
          />
          <el-tab-pane
            v-if="!$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_TYPE_CREATE')"
            label="KTV"
            name="2"
          />
        </el-tabs>
      </div>
      <ProductList
        v-if="shopId"
        :shop-id="shopId"
        :tab-name="tabName"
        :is-copy="true"
        @hideDialogProductList="hideDialogProductList"
      />
    </el-dialog>
  </div>
</template>

<script>
import ProductList from './ProductList'
export default {
  components: {
    ProductList
  },
  data() {
    return {
      resolve: null,
      reject: null,
      dialogVisible: null,
      // 数据
      shopId: '',
      tabName: ''
    }
  },
  methods: {
    open({ shopId, tabName }) {
      // 设置tab
      const addAuthArr = []
      if (
        !this.$store.getters.banBtnList.includes('MCH_BTN_BK_FD_TYPE_CREATE')
      ) {
        addAuthArr.push('0')
      }
      if (
        !this.$store.getters.banBtnList.includes('MCH_BTN_BK_HR_TYPE_CREATE')
      ) {
        addAuthArr.push('1')
      }
      if (
        !this.$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_TYPE_CREATE')
      ) {
        addAuthArr.push('2')
      }
      this.shopId = shopId
      this.tabName = addAuthArr.includes(tabName) ? tabName : addAuthArr[0]
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.shopId = ''
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    hideDialogProductList(data) {
      if (data) {
        this.resolve && this.resolve(data)
      }
      this.hide()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .tab ::v-deep {
    margin-bottom: 20px;
    .el-tabs__header {
      margin-bottom: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }
</style>
